<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<meta http-equiv="X-UA-Compatible" content="IE=edge">
		<title></title>
		<link rel="stylesheet" href="css/bootstrap.min.css">
	</head>
	<style>
		*{
			margin: 0 auto;
			padding: 0;
			list-style: none;
		}
		.text{
			margin-top: 30px;
			overflow: hidden;
		}
		.text button{
			color: #777;
		}
		textarea{
			width: 100%
		}
		.box li{
			background: #eee;
			margin: 10px 0;
			padding: 10px;
			font-size: 16px;
			color: #666;
			line-height: 16px;
			border-radius: 4px;
		}
		.box li>p{
			display: inline-block;
			margin: 0px;
		}
		.box{
			margin-top: 30px;
		}
		.del{
			margin-left: 20px;
			color: #666;
			cursor: pointer;
		}
		.maohao{
			margin: 0 5px;
			font-weight: 600;
		}
		a{
			cursor: pointer;
		}
	</style>
	<body>
		<div class="container">
			<div class="row">
				<div class="text col-xs-12">
					<textarea rows="6"></textarea>
					<button class="addbtn btn btn-sm pull-right">发布</button>
				</div>

				<div class="box col-xs-12">
					<ul class="conul">
					</ul>
				</div>
			</div>
		</div>
		<div class="col-xs-12">
			<nav aria-label="Page navigation" style=" text-align: center;">
			  <ul class="pagination">
			    <li page=-1 onclick="page(this)">
			      <a aria-label="Previous">
			        <span aria-hidden="true">&laquo;</span>
			      </a>
			    </li>
			    <li page=1 onclick="page(this)" class="active"><a>1</a></li>
			    <li page=2 onclick="page(this)"><a>2</a></li>
			    <li page=3 onclick="page(this)"><a>3</a></li>
			    <li page=4 onclick="page(this)"><a>4</a></li>
			    <li page=5 onclick="page(this)"><a>5</a></li>
			    <li page=6 onclick="page(this)"><a>6</a></li>
			    <li page=7 onclick="page(this)"><a>7</a></li>
			    <li page=-2 onclick="page(this)">
			      <a aria-label="Next">
			        <span aria-hidden="true">&raquo;</span>
			      </a>
			    </li>
			  </ul>
			</nav>
		</div>
		
		<script src = 'js/jquery.min.js'></script>
		<script>
			// 选择页码
			function page(a) {
				$.ajax({
					url: 'http://127.0.0.1:8989/getPage',
					method: 'get',
					dataType: 'json',
					data: {
						page:$(a).attr('page')
					},
					success:function(res){
						$('.conul').html('');
						add(res.result,res.page);
					}
				})
			}		
			// 加载数据库数据
			function add(data,page) {
	            for (var i in data) {
	                $('.conul').append(`
	                    <li trid=${data[i]._id}>
							<span class="name">${data[i].name}</span>
							<span class="maohao">:</span>
							<p class="con">${data[i].con}</p>
							<span onclick="del('${data[i]._id}')" class="del pull-right">x</span>
							<span class="time pull-right">${data[i].time}</span>
						</li>`
	                );

	                // li的active变动
	                $('li[page]').each(function() {
	                	$(this).removeClass('active');
	                });
	                $('li[page='+page.currentPage+']').addClass('active')
	            }
	        }
	        // 点击发布
	        $('.addbtn').click(function(event) {
				if($('textarea').val() == ''){
					alert('发布内容不能为空');
				}else{	
					$.ajax({
						url: 'http://127.0.0.1:8989/addList',
						method: 'get',
						data:{
							con:$('textarea').val()
						},
						dataType:'json',
						success:function(res){
							add(res.result,res.page);
							$('.conul').html('');
							$.ajax({
								url: 'http://127.0.0.1:8989/all',
								method: 'get',
								dataType: 'json',
								success:function(res){
									console.log(res)
									add(res.result,res.page);
								}
							})	
						}
					})
					$('textarea').val('');
				}
			});
			// 删除
			function del(_id){
				console.log('del');
				$.ajax({
					url: 'http://127.0.0.1:8989/delList',
					method: 'get',
					data:{
						_id:_id
					},
					dataType: 'json',
					success:function(res){
						add(res.result,res.page);
						// $('li[trid='+_id+' ]').hide();
					}
				})	
			}
	        // ajax请求数据库数据
	        $.ajax({
				url: 'http://127.0.0.1:8989/all',
				method: 'get',
				dataType: 'json',
				success:function(res){
					add(res.result,res.page);
				}
			})	
		</script>
	</body>
</html>